<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserList",
  data() {
    return {
      tableData: [{
          "id": 1,
          "name": "张三",
          "password": "123",
          "gender": "男",
          "birthday": "2000-02-02",
          "age": 24,
          "classInfo": {"id": 1, "name": "一年级"}
    }
  ]
  }
  },
  methods:{
    handleClick(id){
      this.$router.push(`/userList/userUpdate/${id}`)
    },
    findAll(){
      axios.get("http://localhost:8080/user2")
          .then(result=>{
              this.tableData=result.data
          })
    },
    deleteUser(id){
      axios.delete(`http://localhost:8080/user2/${id}`)//``模板字符串  可以在这个字符串中 直接使用${变量}
          .then(result=>{
            console.log(result)
            if (result.data.code === 200) {
              ElMessage({
                message: result.data.msg,
                type: 'primary',
                plain: true,
              })
              this.findAll()
            }
            else {
              ElMessage({
                message: result.data.msg,
                type: 'error',
                plain: true,
              })
            }
          })
    }
  }
  ,mounted(){
    this.findAll()
  }

}
</script>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="编号" width="120"/>
    <el-table-column prop="name" label="姓名" width="120"/>
    <el-table-column prop="gender" label="性别" width="120">
      <template #default="scope">
        <el-tag type="primary" v-if="scope.row.gender==='男'">{{scope.row.gender}}</el-tag>
        <el-tag type="danger" v-else>{{scope.row.gender}}</el-tag>

      </template>
    </el-table-column>
    <el-table-column prop="birthday" label="出生日期" width="200"/>
    <el-table-column prop="age" label="年龄" width="120"/>
    <el-table-column prop="classInfo.name" label="年级" width="120"/>
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
          编辑
        </el-button>
        <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <router-view/>
</template>

<style scoped>

</style>